<template>
  <div id="specialDeduction">
    <div class="header">
      <div class="month">
        <span>扣除期间:</span>
        <el-date-picker v-model="query.month" type="month" :clearable="false" :editable="false" placeholder="选择月"> </el-date-picker>
      </div>
      <div class="Query">
        <div class="left">
          <el-form class="form">
            <el-form-item>
              <el-input v-model="query.keyWord" placeholder="姓名/工号/身份证号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="query.company">
                <el-option value="北京xxx信息科技有限公司">北京xxx信息科技有限公司</el-option>
                <el-option value="武汉xxx信息科技有限公司">武汉xxx信息科技有限公司</el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="query.status">
                <el-option value="全部">全部</el-option>
                <el-option value="待报送">待报送</el-option>
                <el-option value="待反馈">待反馈</el-option>
                <el-option value="报送成功">报送成功</el-option>
                <el-option value="报送失败">报送失败</el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="right">
          <el-button type="primary">下载更新</el-button>
          <el-dropdown @command="handleCommand">
            <el-button type="primary"> 更多菜单<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">导入</el-dropdown-item>
              <el-dropdown-item command="2">导出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="content">
      <el-table :data="rows" height="100%">
        <el-table-column label="序号" min-width="35">
          <template slot-scope="{ row }">
            <el-checkbox>{{ row.num }}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="40"></el-table-column>
        <el-table-column prop="workNumber" label="工号" min-width="50" />
        <el-table-column prop="date" label="扣除期间" min-width="50" />
        <el-table-column prop="idType" label="证件类型" min-width="60" />
        <el-table-column prop="idCard" label="证件号码" min-width="100" />
        <el-table-column prop="children" label="子女教育"></el-table-column>
        <el-table-column prop="continue" label="继续教育"></el-table-column>
        <el-table-column prop="housing" label="住房贷款"></el-table-column>
        <el-table-column prop="support" label="赡养老人"></el-table-column>
        <el-table-column prop="lookAfter" label="3岁以下婴幼儿照护"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="companyname" label="所属公司"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "specialDeduction",
  methods: {},
  created() {
    var date = new Date();
    var month = date.getFullYear() + "-" + (date.getMonth() > 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1));
    this.query.month = month;
  },
  data() {
    return {
      query: { month: "", keyWord: "", company: "", status: "" },
      rows: [
        {
          num: 1,
          name: "徐彬",
          workNumber: "10156",
          date: "2022-09",
          idType: "身份证",
          idCard: "412828199905211547",
          children: "- -",
          continue: "- -",
          housing: "- -",
          support: "- -",
          lookAfter: "- -",
          status: "报送成功",
          companyname: "北京云代账",
          updateTime: "2022-09-17 14:32"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
#specialDeduction {
  padding: 20px;
  .header {
    margin-top: 5px;
    .month {
      font-weight: 900;
      .el-date-editor {
        :deep(.el-input__inner) {
          border-bottom: 0 !important;
          font-size: 19px;
          font-weight: 600;
        }
      }
    }
    .Query {
      margin-top: 15px;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .form {
          display: inline-flex;
          .el-form-item {
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>
